<template>
  <div class="contents">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="出库管理" name="first"></el-tab-pane>
      <el-tab-pane label="出库查询" name="second"></el-tab-pane>
    </el-tabs>
    <div class="btn-fixed" v-if="activeName == 'first'">
      <el-button type="primary" icon="el-icon-plus" @click="goAddDelivery">
        新增
      </el-button>
    </div>
    <div class="btn-fixed" v-else>
      <el-button>导出</el-button>
    </div>
    <el-row :gutter="5">
      <el-col :span="3">
        <el-select v-model="value" placeholder="默认库房">
          <el-option label="全部" value="0"></el-option>
          <el-option label="默认库房" value="1"></el-option>
          <el-option label="冻货库房" value="2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="value" placeholder="全部类型">
          <el-option
            v-for="item in opt2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="value" placeholder="全部状态">
          <el-option label="全部状态" value="0"></el-option>
          <el-option label="待出库" value="1"></el-option>
          <el-option label="已出库" value="2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3" v-show="this.activeName == 'second'">
        <el-cascader :options="options" placeholder="全部分类"></el-cascader>
      </el-col>
      <el-col :span="7">
        <el-select v-model="value" placeholder="请选择" style="width: 90px;">
          <el-option label="出库时间" value="1"></el-option>
          <el-option label="制单时间" value="2"></el-option>
        </el-select>
        <el-date-picker
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 200px;"
        ></el-date-picker>
      </el-col>
      <span v-if="this.activeName == 'first'">
        <el-col :span="4">
          <el-input placeholder="输入单号/制单人">
            <el-button
              slot="append"
              icon="el-icon-search"
              type="primary"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="关联单号搜索">
            <el-button
              slot="append"
              icon="el-icon-search"
              type="primary"
            ></el-button>
          </el-input>
        </el-col>
      </span>
      <span v-else>
        <el-col :span="4">
          <el-input placeholder="请输入商品编码/别名">
            <el-button
              slot="append"
              icon="el-icon-search"
              type="primary"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4" style="margin-top: 5px;">
          <el-input placeholder="关联单号搜索">
            <el-button
              slot="append"
              icon="el-icon-search"
              type="primary"
            ></el-button>
          </el-input>
        </el-col>
      </span>
    </el-row>
    <div v-if="this.activeName == 'first'">
      <el-table :data="table1.list" style="margin-top: 10px;">
        <el-table-column prop="no" label="单号" width="120px"></el-table-column>
        <el-table-column prop="total" label="单据金额" width="120px"></el-table-column>
        <el-table-column prop="out_time" label="出库时间" width="100px">
          <template slot-scope="scope">
            {{scope.row.out_time | formatDate}}
          </template>
        </el-table-column>
        <el-table-column prop="warehouseInfo.name" label="仓库" width="120px"></el-table-column>
        <el-table-column prop="type" label="类型" width="120px"></el-table-column>
        <el-table-column prop="relativeOrderNo" label="关联单号" width="120px"></el-table-column>
        <el-table-column prop="customerInfo.name" label="客户名称" width="120px"></el-table-column>
        <el-table-column prop="cuser" label="制单人" width="120px"></el-table-column>
        <el-table-column prop="status" label="状态" width="120px">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1">
              待入库
            </div>
            <div v-if="scope.row.status == 2">
              已入库
            </div>
            <div v-if="scope.row.status == 0">
              未确认
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200px">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: flex-end;height: 100%;top: 0;">
              <!-- {{isshow}}aaa{{scope.$index}} -->
                <div class="items" v-if="scope.row.status == 0">
                  <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info"
                     @confirm="affirmfunc(scope.row)"  icon-color="red" title="确定确认吗？">
                    <div slot="reference">确定</div>
                  </el-popconfirm>
                </div>
                <div class="items"  @click="detailfunc(scope.row)">详情</div>
                <div class="items" v-if="scope.row.status == 0"  @click="editfunc(scope.row)">编辑</div>
                <div class="items"  v-if="scope.row.status == 0" >
                  <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info"
                    @confirm="delfunc(scope.row)" icon-color="red" title="确定删除吗？">
                    <div slot="reference">删除</div>
                  </el-popconfirm>
                </div>
                <div  class="items">打印</div>
                <div class="items">
                  导出
                </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="totalMount">
        <span>合计:</span>
        <span style="color: red;">0.00</span>
      </div>
      <el-pagination
        background
        layout="total, prev, pager, next,sizes, jumper"
        :page-size="table1pageSize"
        :current-page.sync="table1Page1"
        @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
        :page-sizes="[10, 15, 20, 50, 100]"
        style="text-align: left;"
        :total="table1.total"
      />
    </div>
    <div v-else>
      <el-table
        :data="table2.list"
        show-summary
        style="width: 100%; margin-top: 10px;"
      >
        <el-table-column prop="goodsInfo.name" label="商品"></el-table-column>
        <el-table-column prop="goodsInfo.detail" label="描述"></el-table-column>
        <el-table-column prop="warehouseOutItems.unit" label="单位"></el-table-column>
        <el-table-column prop="warehouseInfo.name" label="仓库"></el-table-column>
        <el-table-column prop="type" label="出库类型"></el-table-column>
        <el-table-column prop="customerInfo.name" label="客户名称"></el-table-column>
        <el-table-column prop="relativeOrderNo" label="关联单号"></el-table-column>
        <el-table-column prop="out_time" label="出库时间" width="100px"></el-table-column>
        <el-table-column prop="warehouseOutItems.qty" label="出库数量"></el-table-column>
        <el-table-column prop="warehouseOutItems.price" label="出库单价">
          <template slot-scope="scope">
            {{scope.row.warehouseOutItems.price/100}}
          </template>
        </el-table-column>
        <el-table-column prop="total" label="出库金额"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, prev, pager, next,sizes, jumper"
        :page-size="table2.pageSize"
        :page-sizes="[10, 15, 20, 50, 100]"
        style="text-align: left;"
        :total="table2.size"
      />
    </div>
  </div>
</template>
<!-- deliveryManageedit -->
<script>
import {WarehouseOutQuery, WarehouseOutQueryInfo, Warehouseentryaffirm, Warehouseentrydel} from '@/api/warehouse'
  export default {
    data() {
      return {
        activeName: 'first',
        options: [],
        value: '',
        isshow:-1,
        table1: [],
        table1pageSize:10,
        table1Page1:1,
        opt2: [
          {
            value: '0',
            label: '全部类型',
          },
          {
            value: '1',
            label: '采购出库',
          },
          {
            value: '2',
            label: '其他出库',
          },
          {
            value: '3',
            label: '调货出库',
          },
          {
            value: '4',
            label: '订单退货',
          },
          {
            value: '5',
            label: '单位转换',
          },
          {
            value: '6',
            label: '期初出库',
          },
          {
            value: '7',
            label: '报溢出库',
          },
          {
            value: '8',
            label: '分割出库',
          },
        ],
        table2: [
          {
            name: '菜跟团',
          },
        ],
      }
    },
    created(){
      this.deliveryList()
    },
    filters:{
      formatDate(date) {
        // return '11'
        var date = new Date(date*1000);
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD +" "+hh + mm + ss;
      },
      },
    methods: {
      async delfunc(val) {
        let data = {
          id: val.id
        }
        console.log(val);
        let res = await Warehouseentrydel(data)
        if (res.status == 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          })
          this.deliveryList()
        } else {
          this.$message({
            message: "删除失败",
            type: "error"
          })
        }
        console.log(res);
      }
      ,editfunc(val){
        this.$router.push("/roomstore/deliveryManageedit/"+val.id)
        console.log(val);
      },
      detailfunc(val) {
        // console.log(val);
        this.$router.push('/roomstore/deliveryManageParticulars/' + val.id)
      },
      handleSizeChange1(val) {
        this.table1pageSize = val
              console.log(`每页 ${val} 条`);
              this.deliveryList()
            },
            handleCurrentChange1(val) {
this.table1Page1 = val
this.deliveryList()
              console.log(`当前页: ${val}`);
            },
      async affirmfunc(val){
        console.log(val);
        let data={
          id:val.id,
          status:1
        }
        let res = await Warehouseentryaffirm(data)
        if (res.status == 200) {
          this.$message({
            message: "确认成功",
            type: "success"
          })
          this.deliveryList()
        } else {
          this.$message({
            message: "确认失败",
            type: "error"
          })
        }
        // WarehouseInputaffirm()
      },formatDate(date) {
        // return '11'
        var date = new Date(date*1000);
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD +" "+hh + mm + ss;
      },
      async deliveryList(){
        // { “pagesize”:5,"current":1}
        let data = {
          pagesize:this.table1pageSize,
          current:this.table1Page1
        }
        const res = await WarehouseOutQuery(data)
        console.log(res);
        this.table1 = res.data
      },
      async deliveryInfo(){
        const res = await WarehouseOutQueryInfo({})
        console.log(res.data,2222222222222222222222222222222222)
        res.data.list.forEach((item)=>{
          console.log(item.out_time)
          item.out_time = this.formatDate(item.out_time)

        })
        this.table2 = res.data
      },
      handleClick(tab){
        if(tab.index == 0){
          this.deliveryList()
        }else{
          this.deliveryInfo()
        }
      },
      goAddDelivery() {
        this.$router.push('/roomstore/addDeliveryOrder')
      },
      enter(row, column, cell, event) {
        this.isshow = row.id
      },
      leave(row, column, cell) {
        this.isshow = -1
      },
    },
  }
</script>

<style lang="scss" scoped>
  .items{
    cursor: pointer;
    display: flex;
    align-items:center;
    justify-content: center;
    flex: 1;
    height: 100%;
    text-align: center;
    color: #1890ff;
  }
  .contents {
    padding: 0 20px 10px;

    .totalMount {
      height: 30px;
      line-height: 30px;
      background: #e6e6e6;
      text-align: right;
      font-size: 15px;
      padding-right: 34px;
    }

    .btn-fixed {
      position: absolute;
      top: 24px;
      right: 40px;
      z-index: 12;
    }
  }
</style>
